import { Card } from 'antd';
import { FC, useEffect, useState } from 'react'
import FormOption from '../compontents/visitor/FormOption';
import * as Api from '@/api/visitor'
import TableBase from '../compontents/visitor/table/TableBase';
let defParams = {
  page: 1,
  pageSize: 10
}
const VisitorList: FC = () => {
  const [ tableData, setTableData ] = useState([])
  // 调用此方法可以不传参数，默认为一个空对象；比如添加/修改/删除 后要更新列表 
   const getVisitorList = async (params:any={}) => {
   // 接收查询参数，如果还有别的参数，合并对象
    console.log('===当前查询的参数', {...defParams, ...params})
    // 请求列表接口
    const { data} = await Api.getVisitorList({...defParams, ...params})
     // data 为表格中数据，每次更新要视图更新，放进state中
     setTableData(data)
   }
   
   // 初始化执行一次请求列表
   useEffect(() => {
      getVisitorList()
   }, [])
    return (<div className='VisitorList'>
        {/* 头部 */}
        <Card title='数据筛选'>
            {/* 表单操作 */} 
            <FormOption getVisitorList={getVisitorList} />
        </Card>
        {/* 表格组件 */}
        {/* 把columns设置为可选，走默认的 */}
        <TableBase data={tableData}  getVisitorList={getVisitorList} />
        {/* list 表格中需要的数据-> 列表中会有修改操作，修改后需要调用getVisitorList */}
        
        {/* 分页  也是改变参数  -> 更改分页数据后需要调用getVisitorList*/}
        {/* TODO封装分页 */}
        
    </div>);
}
export default VisitorList;
